<template>
	<view class="content">

		<view class="Btitle">
			壁纸小程序
		</view>

		<view class="input">
			<uni-search-bar placeholder="请搜索壁纸" bgColor="rgba(247, 247, 247, 0.8)" :radius="30" @confirm="search"
				v-model="searchValue" @input="input">
			</uni-search-bar>
		</view>

		<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" circular>
			<swiper-item v-for="item in banners" :key="item">
				<image :src="baseURL+item.img" mode="aspectFill"></image>
			</swiper-item>
		</swiper>

		<view class="tg">
			<uni-notice-bar scrollable background-color="rgb(245 245 245)" color="rgba(0, 0, 0, 0.58)" show-icon
				text="声明:此项目图片及其接口资源来自网络,仅限学习,勿作他用!!" />
		</view>

		<scroll-view :scroll-x="true" class="scrollview-box">
			<block v-for="(item, index) in categor" :key="index">
				<view class="item" @click="detail(item)">
					<image :src="baseURL+item.img"></image>
					<view class="tit">
						<view>{{ item.name }}</view>
					</view>
				</view>
			</block>
		</scroll-view>


		<view class="box">
			<view class="title fw">
				<span>热门壁纸</span>
				<span> <uni-icons type="right" size="15" color="#999"></uni-icons> </span>

			</view>

			<view class="lists-two">
				<view class="item" v-for="(item, index) in collections" :key="index" @click="download(item.id)">
					<image :src="baseURL+item.img" mode="aspectFill" lazy-load></image>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	import {
		banner_list,
		ByCategoryList,
		CategoryList,
		CollectionsList
	} from "../../utils/api/index.js"
	import {
		baseURL
	} from "../../utils/httpRequest/baseURL.js"

	export default {
		data() {
			return {
				baseURL,
				
				banners: [],
				categor: [],
				collections: []
			};
		},
		onLoad(options) {
			this.getBannerList()
			this.Category()
			this.Collections()
		},
		methods: {
			async getBannerList() {
				const res = await banner_list()
				this.banners = res.data
			},
			async Category() {
				const res = await CategoryList()
				this.categor = res.data
			},
			async Collections() {
				const res = await CollectionsList()
				console.log(12, res);
				this.collections = res.data
			},

			detail(item) {
			    let categoryId = item.id;
			    let img = item.img;
			    let name = item.name;

			    uni.navigateTo({
			        url: `/pages/list/list?categoryId=${categoryId}&img=${img}&name=${name}`
			    });
			},
			download(id) {
				uni.navigateTo({
					url: `/pages/download/download?id=${id}` // 正确的路由格式，传递id作为参数
				});
			}
		}
	};
</script>

<style scoped lang="scss">
	.content {
		padding: 40rpx 0;
		background: linear-gradient(to bottom, #ffaa00, #ffffff, #ffffff, #ffffff, #ffffff);
		background:
			linear-gradient(to bottom, transparent, #fff 260px),
			radial-gradient(20% 150px at 70% 230px, rgba(170, 170, 255, 0.4), transparent),
			radial-gradient(20% 150px at 70% 230px, rgba(170, 255, 255, 0.34), transparent),
			radial-gradient(50% 300px at 90% 100px, rgba(212, 230, 241, 0.48), transparent),
			#FFF0F5;

		.u-swiper-wrap {
			border-radius: 15upx !important;
			margin: 20rpx 0 !important;
		}

		.phb {
			height: auto;
		}

		.Btitle {
			padding: 0 20rpx;
			font-size: 38rpx;
			font-weight: 700;
			color: #000;
		}
	}

	.tg {
		padding: 0 20rpx;
		border-radius: 40rpx;
	}

	swiper {
		width: 96%;
		height: 300rpx;
		margin: 20rpx auto;
	}

	swiper swiper-item {
		height: 100%;
		border-radius: 20rpx;
	}

	swiper-item image {
		margin: 0 20rpx;
		width: 100%;
		height: 100%;
		border-radius: 20rpx;
		box-sizing: border-box;
	}

	.scrollview-box {
		white-space: nowrap;
		width: 100%;
		padding: 20rpx 20rpx 0rpx 20rpx;
	}

	.uni-noticebar {
		margin-bottom: 0;
	}

	.scrollview-box .item {
		width: 300rpx;
		height: 200rpx;
		margin-right: 20rpx;
		display: inline-flex;
		flex-direction: column;
		align-items: center;
		border-radius: 10rpx;
		overflow: hidden;
		position: relative;
	}

	.scrollview-box .item image {
		width: 300rpx;
		height: 100%;
	}

	.scrollview-box .item .tit {
		position: absolute;
		top: 0%;
		left: 50%;
		transform: translate(-50%, 0%);
		font-size: 28rpx;
		width: 100%;
		height: 200rpx;
		line-height: 200rpx;
		display: flex;
		justify-content: center;
		background-color: rgba(0, 0, 0, 0.42);
		color: #fff;
	}

	.lists-two {
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-wrap: wrap;
		margin-top: 25rpx;
	}

	.lists-two .item {
		position: relative;
		width: 48.5%;
		height: 500rpx;
		margin-bottom: 30rpx;
		overflow: hidden;
	}

	.lists-two .item image {
		width: 100%;
		height: 100%;
		margin-bottom: 10rpx;
		border-radius: 12rpx;
	}

	.lists-two .item .title {
		position: absolute;
		font-size: 28rpx;
		font-weight: 500;
		width: 100%;
		bottom: 0;
		left: 10rpx;
		color: #dedede;
		text-align: center;
	}

	.bx {
		display: flex;
		align-items: center;
		justify-content: start;
	}

	.lists-two .item .title image {
		width: 32rpx !important;
		height: 32rpx;
		margin-right: 15rpx;
	}



	.box {
		padding: 30rpx 25rpx;
	}

	.cateBox {
		padding: 20rpx 10rpx 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.c-item {
		width: 20%;
		height: 100%;
		text-align: center;
	}

	.c-item image {
		width: 100rpx;
		height: 100rpx;
		border-radius: 10rpx;
	}

	.c-item .tit {
		font-size: 28rpx;
		margin-top: 10rpx;
	}

	.title {
		font-size: 34rpx;
		font-weight: 700;
	}

	.h-item {
		height: 140rpx;
		margin-top: 25rpx;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		border-radius: 10rpx;
		background-color: rgba(255, 255, 255, 0.25);
		padding: 10rpx 20rpx;
		box-sizing: border-box;
	}

	.h-item .left image {
		width: 100rpx;
		height: 100rpx;
		border-radius: 10rpx;
		margin-right: 30rpx;
	}

	.h-item .info {
		width: 60%;
	}

	.h-item .info .tit {
		font-size: 30rpx;
		font-weight: 700;
	}

	.h-item .info .auther {
		font-size: 26rpx;
		margin-top: 10rpx;
		color: #999;
	}

	.icons {
		text-align: end;
		width: 20%;
		font-size: 28rpx;
		color: #999;
	}


	.fx {
		width: 100%;
		display: flex;
		justify-content: space-between;
	}

	.input {
		width: 96%;
		margin: 15rpx auto 10rpx;
	}

	.fw {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.fw span:nth-child(2) {
		font-size: 24rpx;
		font-weight: 500;
		color: #999;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.uni-noticebar {
		border-radius: 20px;
	}

	.uni-searchbar {
		padding: 10px 0;
	}
</style>